<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script>
        window.addEventListener('load', function() {
            // 1.获取元素
            var inputs = document.querySelectorAll('input');
            var textarea = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            inputs[1].addEventListener('click', function() {
                // 获取inputs[0],textarea的value
                var textVal = inputs[0].value;
                var areaVal = textarea.value;
                // 在ul中添加元素
                var lis = '<li><span>' + textVal + '</span><p>' + areaVal + '</p></li>';
                ul.insertAdjacentHTML('beforeend', lis);
            })
        })
    </script>
</head>

<body>
    <h1>制作留言板前端局部更新效果</h1>
    <ul>
        <li>
            <span>功夫熊猫</span>
            <p>欢迎你</p>
        </li>
    </ul>
    <form method="post">
        <h2>Message</h2>
        <label for="Name">昵称</label>
        <input type="text" name="Name" class="text" placeholder="你的昵称" />
        <label for="Content">留言内容</label>
        <textarea name="Content" class="text" rows="4" placeholder="你要说的话"></textarea>
        <input type="button" value="单击这里提交留言" />
    </form>
</body>

</html>